import React, { Component } from 'react'
import { Card, Breadcrumb, Icon, Pagination } from 'antd'
import { connect } from 'react-redux'
import ExcellentAssignmentBox from './excellent-assignment-box'
import * as assignmentActions from '../../../actions/assignment'
import * as taskActions from '../../../actions/task'
import '../../../less/index.less'
import {getLangFromLocalStorage} from '../../../constant/lang-util'
import { FormattedMessage } from 'react-intl'

class ExcellentAssignmentListPageBody extends Component {
  constructor (props) {
    super(props)
    this.state = {
      programId: 0,
      taskId: 0,
      sectionId: 0,
      assignmentId: 0,
      page: 1,
      pageSize: 10
    }
  }

  componentDidMount () {
    this.setState({
      assignmentId: this.props.match.params.assignmentId,
      programId: this.props.match.params.programId,
      taskId: this.props.match.params.taskId,
      studentId: this.props.match.params.studentId,
      quizId: this.props.match.params.quizId
    }, () => {
      const {taskId, assignmentId, quizId} = this.state
      this.props.getTaskInfo(taskId)
      this.props.getExcellentQuizzes(assignmentId, quizId)
    })
  }

  submitComment (studentId, content) {
    this.props.submitSectionComment(this.state.taskId, this.state.sectionId, studentId, content)
  }

  onChangePage = (page) => {
    const { assignmentId, quizId} = this.state
    this.setState({page})
    this.props.getExcellentQuizzes(assignmentId, quizId, page, 1)
  }

  render () {
    const {taskInfo} = this.props
    const {content, totalElements} = this.props.excellentQuizzes
    const { task } = taskInfo
    const {topic = {}, assignments = []} = task
    const {programId, taskId, quizId, page, pageSize} = this.state
    const assignment = assignments.find(assignment => {
      return assignment.id === parseInt(this.state.assignmentId, 10)
    }) || {}
    const lang = getLangFromLocalStorage()

    return (
      <div>
        <div className='margin-l-4 margin-t-2'>
          <a onClick={() => window.history.back()}><Icon type='arrow-left' /><FormattedMessage id='返回上一页' /></a>
        </div>
        {content.length > 0
         ? <div>
           <Card title={<div className='line'>
             <Breadcrumb>
               <Breadcrumb.Item>{topic[`title_${lang}`] || topic.title}</Breadcrumb.Item>
               <Breadcrumb.Item>{task[`title_${lang}`] || task.title}</Breadcrumb.Item>
               <Breadcrumb.Item>{assignment[`title_${lang}`] || assignment.title}</Breadcrumb.Item>
             </Breadcrumb>
           </div>} noHovering bordered={false}>
             { programId
               ? <ExcellentAssignmentBox assignment={assignment} programId={programId} taskId={taskId} quizId={quizId}
                 excellentQuizzes={content} />
                : ''
              }
           </Card>
           <Pagination defaultCurrent={page}
                       total={totalElements}
                       pageSize={pageSize}
                       current={page}
                       onChange={this.onChangePage} />
         </div>
          : <FormattedMessage id='暂无优秀作业' />}
      </div>
    )
  }
}

const mapStateToProps = ({excellentQuizzes, taskInfo}) => ({excellentQuizzes, taskInfo})
const mapDispatchToProps = dispatch => ({
  getTaskInfo: (taskId) => dispatch(taskActions.getTaskInfo(taskId)),
  getExcellentQuizzes: (assignmentId, quizId, page, pageSize) => dispatch(assignmentActions.getExcellentQuizzes(assignmentId, quizId, page, pageSize))
})

export default connect(mapStateToProps, mapDispatchToProps)(ExcellentAssignmentListPageBody)
